#{extends 'adminm/frame.html' /}

#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery-ui-1.8.10.custom.min.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/pager/jquery.pager.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/ckeditor/ckeditor.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/ckeditor/adapters/jquery.js'}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="@{'/public/uploadify/swfobject.js'}"></script>
<script type="text/javascript" src="@{'/public/uploadify/jquery.uploadify.v2.1.4.min.js'}"></script>
#{/set}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/pager/Pager.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/table.scss'}" />
#{/set}
#{set 'activeItem'}6#{/set}

<div class="navigationBar">
	<table>
		<tr>
			<td><img src="@{'/public/images/navigationHouse.gif'}"></td>
			<td><strong>当前位置：</strong></td>
			<td>
				<a href="/admin">首页</a>
				>>
				<a href="/admin/articles/index">文章管理</a>
				>>
				<a href="/admin/articles/index">文章列表</a>
				>>
				<font class="current">新建文章</font>
			</td>
		</tr>
	</table>
</div>

<script language="javascript">

$(
	function(){
		//使用ckeditor
		CKEDITOR.replace('articleContent');
		
		//初始化弹出窗
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 500,
			width: 500,
			modal: true,
			buttons: {
				'插入': function() {
					var attId = $("#image_upload").val();
					var imgHtml = "<img alt='"+attId+"' title='"+attId+"' src='/attachments/"+attId+"'/>";
					CKEDITOR.instances.articleContent.insertHtml(imgHtml);
					//activeImage(attId,function(){$('#dialog-form').dialog('close');});
					activeImage(attId, 
						function(){
							$('#dialog-form').dialog('close');
						}
					);
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				$("#image_upload").val("");
				$("#image").attr('src', "@{'/public/images/image-placeholder.png'}");
			}
		});
		
		/* uploadify2 */
		$('#image_upload').uploadify({
		    uploader	: '@{'/public/uploadify/uploadify.swf'}',
		    script		: '@{Attachments.create_uploadify}',
		    cancelImg	: '@{'/public/uploadify/cancel.png'}',
		    fileDataName: 'file',
		    fileExt     : '*.jpg;*.gif;*.png',
	    	auto		: true,
	    	onComplete	: function(event, ID, fileObj, response, data){
	    		//显示附件
	    		var getAttachmentAction = #{jsAction @Attachments.show(':id') /}
	    		$("#image").attr('src', getAttachmentAction({id: response}));
	    		//将附件ID添加到form里面
	    		$("#image_upload").val(response);
	    	}
		});
	}
);

function activeImage(id, callback) {
	$.ajax({
		url: "/attachments/active/"+id,
		type: "POST",
		dataType: "json",
		complete: function(XMLHttpRequest, textStatus, errorThrown) {
			if(textStatus == "error") {
				var errJson = eval("("+XMLHttpRequest.responseText+")");
				var errMsg = "操作失败，"+errJson.message;
				$("#errMsg").html(errMsg);
				alert(errMsg);
			} else {
				callback();
			}
		}
	});
}

function insertImage(){
	$('#dialog-form').dialog('open');
}

function goback() {
	window.location.href="/admin/articles/index";
}

function save() {
	$("#new_form").submit();
}

</script>


<!-- 更新窗口 -->
<div id="update-form" class="ui-widget ui-widget-content ui-corner-all" title="修改文章">
	#{form @admin.Articles.createArticle(),id:'new_form'}
		<div class="list_criteria">
			标题：
			<input type="text" name="article.title" id="title" value="${article.title}" size='20'></input>
			<font class="require">*</font>&nbsp;
			<span class="error">#{error 'article.title' /}</span>
			<br><br>
			<input value="插入图片" type="button" onClick="insertImage()">
			<br>
			<textarea name="article.content" id="articleContent">
				${article.content}
			</textarea>
		</div>
	#{/form}
</div>
<input value="保存" type="button" onClick="save()">
<input value="返回" type="button" onClick="goback()">
</div>

<div id="dialog-form" title="上传图片">
	<fieldset>
		<div style="width:100%; text-align:center;">
			<img id="image" src="@{'/public/images/image-placeholder.png'}"/>
	    	<p><input id="image_upload" type="text" name="attId" /></p>
    	</div>
	</fieldset>
</div>
